<template>
  <n-layout-sider
      :collapsed="collapsed"
      show-trigger
      @collapse="collapsed = true"
      @expand="collapsed = false"
      collapse-mode="width"
      :collapsed-width="64"
      :width="240"
      :native-scrollbar="false"
      bordered>
    <n-menu
        key-field="key"
        :value="route.name"
        :collapsed="collapsed"
        :collapsed-width="64"
        :collapsed-icon-size="22"
        :options="options"
        :render-label="renderLabel"
        @update:value="(name, menuItem) => $emit('menuSelected', name, menuItem)"
    />
  </n-layout-sider>
</template>

<script setup>

import {NLayoutSider, NMenu} from "naive-ui";
import {h} from "vue";
import {RouterLink, useRoute} from 'vue-router'

const route = useRoute()

defineProps({
  collapsed: {
    type: Boolean,
    required: true
  },
  options: {
    type: Array,
    default: [],
    required: true
  },
});

const renderLabel = (menu) => {
  if (menu.type === 'C') {
    return h(
        RouterLink,
        {
          to: {
            name: menu.key
          }
        },
        {default: () => menu.label}
    )
  }
  return menu.label
}
</script>

<style scoped>

</style>
